<script setup lang="ts">
import { ref, onMounted } from "vue";
import vChart from "@/views/monitor/server/components/VChart.vue";
import { dayHook } from "./dayHook";
import { DArrowLeft, DArrowRight, ArrowDown } from "@element-plus/icons-vue";
import { setDataHook } from "./setDataHook";
const { yandm, day, xq, setBigXq } = dayHook();
const {
  loading,
  selDay,
  selDayChange,
  showType,
  showType2,
  data,
  data2,
  options,
  options2,
  vppList,
  activeVppId,
  activeData,
  command,
  userData,
  rowClick,
  rightData
} = setDataHook();
const myBox = ref(null);
const height = ref(0);
onMounted(() => {
  height.value = (myBox.value.offsetHeight - 102) / 2;
  if (height.value < 590.5) {
    height.value = 595.5;
  }
});
</script>

<template>
  <div ref="myBox" v-loading="loading" class="w-full h-full flex flex-col">
    <div class="flex items-center mb-[20px] h-[80px]">
      <el-card class="my-bg2 h-full">
        <div class="h-full flex justify-center items-center">
          <!--          <div class="flex items-baseline border-b-[1px]">-->
          <!--            <div class="text-[32px] font-bold">{{ day }}</div>-->
          <!--            <div>日</div>-->
          <!--          </div>-->
          <div class="mx-2">{{ yandm }}{{ day }}日</div>
          <div>星期{{ setBigXq(xq) }}</div>
        </div>
      </el-card>
      <div class="flex-1 h-full pl-[20px]">
        <el-card class="my-bg2 w-full h-full">
          <div class="w-full h-full flex justify-center items-center">
            <div class="left cursor-pointer" @click="selDayChange(-1)">
              <el-icon size="32"><DArrowLeft /></el-icon>
            </div>
            <div
              class="w-[60%] font-bold text-[32px] flex justify-center items-center"
            >
              <!--              <div class="w-[100px]">-->
              <!--                <el-select v-model="activeVppId" placeholder="请选择虚拟电厂">-->
              <!--                  <el-option-->
              <!--                    v-for="item in vppList"-->
              <!--                    :key="item.id"-->
              <!--                    :value="item.id"-->
              <!--                    :label="item.name"-->
              <!--                  />-->
              <!--                </el-select>-->

              <!--              </div>-->
              <el-dropdown trigger="click" @command="command">
                <span
                  class="el-dropdown-link flex items-center font-bold text-[32px]"
                >
                  {{ activeData && activeData.name }}
                  <el-icon size="16" class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-for="item in vppList"
                      :key="item.id"
                      :command="item.id"
                      >{{ item.name }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div class="ml-4">{{ selDay }} 日前调度计划</div>
            </div>
            <div class="right cursor-pointer" @click="selDayChange(1)">
              <el-icon size="32"><DArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <div :style="{ height: `${height}px` }" class="w-full mb-[20px]">
      <el-card class="m-card w-full h-full">
        <div class="w-full h-full">
          <div
            class="flex w-full justify-center items-center text-[24px] h-[40px]"
          >
            {{ selDay }} 日前调度计划执行监视
          </div>
          <div class="w-full flex justify-between h-[calc(100%-40px)]">
            <div class="left-c flex w-[80%] mr-[20px] h-full">
              <div class="charts w-[calc(100%-100px)] h-full">
                <div class="w-full h-[50px] text-[20px] flex items-center">
                  <div class="xian w-[4px] h-[16px] bg-[#3179E3] mr-4" />
                  <div>实时聚合执行监视</div>
                </div>
                <div class="w-full h-[calc(100%-50px)]">
                  <vChart v-if="showType === 'chart'" :options="options" />
                  <div v-else class="w-full h-full">
                    <el-table :data="data" style="height: 100%">
                      <el-table-column
                        align="center"
                        prop="time"
                        label="时刻"
                      />
                      <el-table-column
                        align="center"
                        prop="realData"
                        label="实际值"
                      />
                      <el-table-column
                        align="center"
                        prop="realRegulate"
                        label="实际调节值"
                      />
                      <el-table-column
                        align="center"
                        prop="planRegulate"
                        label="计划调节值"
                      />
                      <el-table-column
                        align="center"
                        prop="baseLineData"
                        label="基线值"
                      />
                      <el-table-column
                        align="center"
                        prop="regulateTime"
                        label="调节时段"
                      />
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="tabs w-[100px] py-4">
                <el-tabs
                  v-model="showType"
                  tab-position="right"
                  style="height: 100%"
                >
                  <el-tab-pane label="图" name="chart" />
                  <el-tab-pane label="表" name="table" />
                </el-tabs>
              </div>
            </div>
            <div class="right-c flex-1 flex flex-col justify-around">
              <div class="border-b-[1px] pb-4">
                <div class="title flex items-center mb-2">
                  <div class="xian w-[4px] h-[16px] bg-[#3179E3] mr-4" />
                  <div>计划调节量</div>
                </div>
                <div class="title2 flex items-baseline">
                  <div class="text-[24px] font-bold text-[#3179E3]">
                    {{
                      rightData.planRegulateAmount === 0
                        ? 0
                        : rightData.planRegulateAmount || "-"
                    }}
                  </div>
                  <div>千瓦时</div>
                </div>
              </div>
              <div class="border-b-[1px] pb-4">
                <div class="title flex items-center mb-2">
                  <div class="xian w-[4px] h-[16px] bg-[#91cc75] mr-4" />
                  <div>实际调节量</div>
                </div>

                <div class="title2 flex items-baseline">
                  <div class="text-[24px] font-bold text-[#91cc75]">
                    {{
                      rightData.realRegulateAmount === 0
                        ? 0
                        : rightData.realRegulateAmount || "-"
                    }}
                  </div>
                  <div>千瓦时</div>
                </div>
              </div>
              <div class="border-b-[1px] pb-4">
                <div class="title flex items-center mb-2">
                  <div class="xian w-[4px] h-[16px] bg-[#fac858] mr-4" />
                  <div>调节偏差</div>
                </div>
                <div class="title2 flex items-baseline">
                  <div class="text-[24px] font-bold text-[#fac858]">
                    {{
                      rightData.regulateDeviation === 0
                        ? 0
                        : rightData.regulateDeviation || "-"
                    }}
                  </div>
                  <div>千瓦时</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div :style="{ height: `${height - 20}px` }" class="w-full">
      <el-card class="m-card w-full h-full">
        <div class="w-full h-full">
          <div class="w-full flex justify-between h-[calc(100%-40px)]">
            <div
              class="right-c w-[calc(60%-20px)] h-full flex flex-col justify-around"
            >
              <div class="w-full h-[50px] text-[20px] flex items-center">
                <div class="xian w-[4px] h-[16px] bg-[#3179E3] mr-4" />
                <div>资源列表</div>
              </div>
              <div class="w-full h-[calc(100%-50px)]">
                <el-table
                  :data="userData"
                  style="height: 100%"
                  @row-click="rowClick"
                >
                  <el-table-column
                    align="center"
                    prop="name"
                    label="用户名称"
                  />
                  <el-table-column
                    align="center"
                    prop="districtName"
                    label="用户地区"
                  />
                  <el-table-column
                    align="center"
                    prop="planRegulateAmount"
                    label="计划调节量(千瓦时)"
                  />
                  <el-table-column
                    align="center"
                    prop="realRegulateAmount"
                    label="实际调节量(千瓦时)"
                  />
                  <el-table-column
                    align="center"
                    prop="regulateDeviation"
                    label="调节偏差"
                  />
                </el-table>
              </div>
            </div>
            <div class="left-c flex w-[40%] ml-[20px] h-full">
              <div class="charts w-[calc(100%-100px)] h-full">
                <div class="w-full h-[50px] text-[20px] flex items-center">
                  <div class="xian w-[4px] h-[16px] bg-[#3179E3] mr-4" />
                  <div>虚拟电厂资源执行监视</div>
                </div>
                <div class="w-full h-[calc(100%-50px)]">
                  <vChart v-if="showType2 === 'chart'" :options="options2" />
                  <div v-else class="w-full h-full">
                    <el-table :data="data2" style="height: 100%">
                      <el-table-column
                        align="center"
                        prop="time"
                        label="时刻"
                      />
                      <el-table-column
                        align="center"
                        prop="realData"
                        label="实际值"
                      />
                      <el-table-column
                        align="center"
                        prop="realRegulate"
                        label="实际调节值"
                      />
                      <el-table-column
                        align="center"
                        prop="planRegulate"
                        label="计划调节值"
                      />
                      <el-table-column
                        align="center"
                        prop="baseLineData"
                        label="基线值"
                      />
                      <el-table-column
                        align="center"
                        prop="regulateTime"
                        label="调节时段"
                      />
                    </el-table>
                  </div>
                </div>
              </div>
              <div class="tabs w-[100px] py-4">
                <el-tabs
                  v-model="showType2"
                  tab-position="right"
                  style="height: 100%"
                >
                  <el-tab-pane label="图" name="chart" />
                  <el-tab-pane label="表" name="table" />
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.m-card .el-card__body) {
  width: 100%;
  height: 100%;
}

:deep(.my-bg2 .el-card__body) {
  width: 100%;
  height: 100%;
  background-color: rgb(143 242 255 / 20%);
}
</style>
